<!DOCTYPE html> 

<!--
  copyright (c) 2011 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
  
  copyright (c) 2012 msih
-->


<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 

<title>AutoComplete using Google Fusion Table Field</title> 

<style>
  body { font-family: Arial, sans-serif; }
  #map_canvas { height: 600px; width:700px; }
</style>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" id="script">
google.load('visualization', '1', {});

var map, layer;
var tableid = "297050";
var columnid = "Store Name";
//var autotag = "example";
var zoom = 10;
var latlng = new google.maps.LatLng(37.5, -122.1);

function initialize() {

//  map = new google.maps.Map(document.getElementById('map_canvas'), {
//    center: latlng,
//    zoom: zoom,
//    mapTypeId: google.maps.MapTypeId.ROADMAP
//  });
  
 // layer = new google.maps.FusionTablesLayer({
  //  query: {
//      select: "Address",
//      from: tableid
//    },
//    map: map
//  }); 

  createAutocompleteOptions("Utility", "1rPtLXKVn-fJ11xVbNoNrmlDgT8-JjhJ_0e5LkEY", "example");
}

function createAutocompleteOptions(FTcolumnID,FTtableID,ACtagID) { 
	var queryText = encodeURIComponent(
		"SELECT '" + FTcolumnID + "', COUNT() " +
		"FROM " + FTtableID + " GROUP BY '" + FTcolumnID + "'");
	//alert(queryText);
	var query = new google.visualization.Query(
		'http://www.google.com/fusiontables/gvizdata?tq='  + queryText); 
	query.send(function getData(response) { 
		//alert(autotag);
		numRows = response.getDataTable().getNumberOfRows(); 
		// Create the list of results for display of autocomplete 
		results = []; 
		for(i = 0; i < numRows; i++) { 
			results.push(response.getDataTable().getValue(i, 0)) ; 
		}	 
		// Use the results to create the autocomplete options
		$("#"+ACtagID).autocomplete({ 
			source: results, 
			minLength: 2
		}); 
	});
 }

function changeQuery(value) {
    //var table = new google.visualization.Table(document.getElementById('visualization'));
			  
	var query_ = "select 'Date' from 1rPtLXKVn-fJ11xVbNoNrmlDgT8-JjhJ_0e5LkEY order by 'Date' DESC";
        var team = value;
        if (team) {
          query_ += " WHERE 'Utility' = '" + team + "'";
        }
        //var queryText2 = encodeURIComponent(query2);
        //var gvizQuery = new google.visualization.Query('https://www.google.com/fusiontables/gvizdata?tq=' + queryText2);
var gvizQuery = new google.visualization.Query("https://www.google.com/fusiontables/gvizdata?tq=select 'Utility', 'Supplier', 'Cost', 'Contract Length', 'State', 'Date' from 1rPtLXKVn-fJ11xVbNoNrmlDgT8-JjhJ_0e5LkEY order by 'Date' DESC");
        gvizQuery.send(function(response) {
		if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
             return;
          }
          
           var data = response.getDataTable();
          var wrapper = new google.visualization.ChartWrapper();
          wrapper.setDataTable( data);
          wrapper.setChartType('Table');
          wrapper.setContainerId('visualization');
          wrapper.setOptions(             {
               "hAxis": {
                 "useFormatFromData": true,
                 "minValue": null,
                 "maxValue": null,
                 "viewWindow": {
                   "max": null,
                   "min": null
                 },
                 "viewWindowMode": "pretty",
                 "format": ""
               },
               "legend": "right",
               "series": {
                 "1": {
                   "hasAnnotations": true
                 }
               },
               "vAxes": [
                 {
                   "title": null,
                   "minValue": null,
                   "maxValue": null,
                   "useFormatFromData": true,
                   "viewWindowMode": "pretty",
                   "viewWindow": {
                     "max": null,
                     "min": null
                   }
                 },
                 {
                   "useFormatFromData": true,
                   "viewWindowMode": "pretty",
                   "viewWindow": {
                     "max": null,
                     "min": null
                   },
                   "minValue": null,
                   "maxValue": null
                 }
               ],
               "booleanRole": "certainty",
               "page": "enable",
               "pageSize": 10,
               "strictFirstColumnType": false,
               "width": "500",
               "height": "400",
               "vAxis": {
                 "format": ""
               }
             }
          );
        //  wrapper.setOption('width',winW-20);
        //  wrapper.setOption('height',winH-20);
          wrapper.setOption('strictFirstColumnType',false);
          wrapper.draw();
        });
      }


</script> 
</head> 
<body onload="initialize();">
  <input type="text" id="example" />
  <input type="button" value="Go!" onclick="changeQuery(document.getElementById('example').value);" />
  <div id="visualization"></div>
  <div id="map_canvas"></div>
  <div id="code"></div>
</body> 
</html> 